
<template>
	<view class="bg-white" style="width: 100vw;height: 100vh;">
		<scroll-view style="height: 100%;" scroll-y>
			<!-- 顶部返回按钮和分享按钮 -->
			<cu-custom bgColor="bg-white" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="right">
					<text class="lg text-gray cuIcon-share " @click="share()"></text>
				</block>
			</cu-custom>
			<!-- 文章标题 -->
			<view class="margin">
				<text class="text-xxl text-black" style="font-weight: 600;">{{article.title}}</text>
			</view>
			<!-- 个人信息 -->
			<view class="flex align-center margin justify-between ">
				<!-- 头像 姓名 -->
				<view class=" flex align-center" @click="$Router.push({name:'profile',params:{authorId:article.userId}})">
					<view class="cu-avatar round margin-right-xs" :style="{'background-image':'url(' + article.avatar + ')'}"></view>
					<text class="text-gray" style="font-weight: 500;">{{article.userName}}</text>
				</view>
				<!-- 是否关注 -->
				<view>
					<button :class="[isFollow?'cu-btn block bg-grey margin-tb-sm':'cu-btn block bg-blue margin-tb-sm']" style="width: 150rpx; height: 60rpx;"
					 @click="follow()">{{isFollow?'已关注':'关注'}}</button>
				</view>
			</view>
			<!-- 原创、时间信息 -->
			<view class="text-gray margin">
				<text class="margin-right">原创</text>
				<text>{{article.gmtCreate}}</text>
			</view>
			<!-- 正文 -->
			<view class="margin text-lg ">
				<rich-text :nodes="article.content" style="line-height: 64rpx;"></rich-text>
			</view>
			<!-- 评论 回复 -->
			<comment class="margin-left margin-right" v-if="showComment" :comment-list="commentList" type-name="文章" @publish="handlePublish"></comment>
			<!-- 底部导航栏 -->
            <view class="flex solid-top bg-white" style="width: 100%;height: 120rpx;position: fixed;bottom: 0;">
				<!-- 评论 -->
				<view class="flex-sub flex flex-direction  align-center margin-top-sm">
					<text @click="toggleMask('show')" class="text-black cuIcon-comment " style="font-size: 50rpx;"></text>
					<text>{{commentList.length}}</text>
				</view>
				<!-- 收藏 -->
				<view class="flex-sub  flex flex-direction  align-center margin-top-sm">
					<text :class="[isLike?' text-blue cuIcon-appreciatefill':'text-black cuIcon-appreciate']" @click="like()" style="font-size: 50rpx;"></text>
					<text>{{likeCount}}</text>
				</view>
				<!-- 点赞 -->
				<view class="flex-sub  flex flex-direction  align-center margin-top-sm">
					<text :class="[isFavorite?' text-blue cuIcon-likefill':'text-black cuIcon-like']" @click="favorite()" style="font-size: 50rpx;"></text>
					<text>{{favoriteCount}}</text>
				</view>
			</view>
			<!-- 占位区 -->
			<view style="width: 100%;height: 120rpx;"></view>


		</scroll-view>
		<ygc-comment ref="ygcComment"
		    :placeholder="'发布评论'" 
			@pubComment="pubComment"></ygc-comment>


			<!-- 底部弹出 分享框 -->
			<popup :type="bottom" ref="popup">
				<popup-share @close="close"></popup-share>
			</popup>
		</scroll-view> 



	</view>
</template>

<script>
	const TypeArticle = '1';
	import comment from '../../components/comment/comment.vue';
	import ygcComment from '../../components/comment/ygc-comment.vue';
	import popup from '../../components/uni-popup/uni-popup.vue';
	import popupShare from '../../components/share-btn/share-btn.vue';
	import articleApi from '../../api/articleApi.js';
	import mineApi from '../../api/mineApi.js';
	export default {
		components:{
			comment,
			ygcComment,
			popup,
			popupShare
		},
		data() {
			return {
				user: {},
				isFollow: false,
				isFavorite:false,
				isLike:false,
				favoriteCount:1920,//点赞数
				likeCount:1080,//收藏数
				articleId: this.$Route.query.id,
				article:{},

				showComment: false,
				constantID: "0000000000000000000",
				targetComment: {},
				commentList: [],
				bottom:"bottom",
			}
		},
		onShow() {
			console.log("articleId", this.articleId);
			this.user.id = this.$store.getters.userid;
			articleApi.getArticleInfo(
			{
				articleId: this.articleId, 
				userId: this.user.id
			}).then(res=>{
				// console.log(res)
				this.article = res.data
				console.log(this.article)
				if(!this.article.content){return;}
				this.isFollow = res.data.isFollow;
				this.isLike = res.data.isLike;
				this.isFavorite = res.data.isFavorite;
				this.favoriteCount = res.data.favoriteCount;
				this.likeCount = res.data.likeCount;
			})
			//获取用户信息
			mineApi.getMemberInfo(this.user.id).then(res=>{
				 if (res.data) {
					this.user = res.data;
					
				}
			}).catch(err => {
				console.log(err);
			});
			
			this.targetComment = {};


			articleApi.getArticleComment([this.articleId, TypeArticle]).then(res=>{
				this.commentList = res.data;
				this.showComment = true;
			})
		},
		onUnload() {
			this.$http.post("/edu/learn-record/updateLearnRecord", {
				"authorId": this.article.userId,
				"columnType": TypeArticle,
				"contentId": this.articleId,
				"contentSubject": "",
				"currentTime": 0,
				"userId": this.user.id
			}).then(res => {
				let data = res.data;
				if (!data.success) {
					console.log("更新学习记录失败")
				}
			})
		},
		methods: {
			toggleMask(type) {
				this.$refs.ygcComment.toggleMask(type);
			},
			handlePublish: function(item) {
				this.targetComment = item;
				this.toggleMask("show");
			},
			pubComment(commentContent) {
				this.$refs.ygcComment.toggleMask();
				this.$refs.ygcComment.content = '';
				let constantID = this.constantID;
				console.log(this.targetComment)
				//向后端添加评论
				let comment = {
					userId: this.user.id,
					parentCommentId: JSON.stringify(this.targetComment) == "{}" ? constantID: (this.targetComment.parentCommentId==constantID?this.targetComment.commentId:this.targetComment.parentCommentId),
					targetCommentId: JSON.stringify(this.targetComment) == "{}" ? constantID: (this.targetComment.parentCommentId==constantID?constantID:this.targetComment.commentId),
					targetUserId: JSON.stringify(this.targetComment) == "{}" ? '' : (this.targetComment.parentCommentId==constantID?'':this.targetComment.userId),
					contentId: this.articleId,
					columnType: TypeArticle,
					content: commentContent
				}
				// console.log(JSON.stringify(comment));
				articleApi.addComment(comment).then(res=>{
					this.$tip.success('评论成功!');
					this.$Router.replace({name: 'article', params:{id: this.articleId}})
				})
			},
			share() {
				this.$refs.popup.open()
			},
			follow() {
				this.isFollow = !this.isFollow;
				if(this.isFollow) {	//与粉丝没有互关，点击后关注粉丝unfollowOne
					this.$http.post("/ucenter/follow/followOne", 
					{
						userId: this.user.id,
						followedId: this.article.userId
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						}
					}).catch(err => {
						console.log(err);
					});
				}else {	//与粉丝互关，点击后取关粉丝
					this.$http.post("/ucenter/follow/unfollowOne",
					{
						userId: this.user.id,
						followedId: this.article.userId
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						}
					}).catch(err => {
						console.log(err);
					});
				}
			},
			favorite(){
				this.isFavorite = !this.isFavorite;
				if(this.isFavorite){	//收藏
					this.favoriteCount++;
					this.$http.post('/edu/favorite/favoriteContent', 
					{
						contentId: this.articleId,
						userId: this.user.id,
						columnType: TypeArticle
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						} else {
							this.$tip.error("收藏失败！");
							this.isFavorite = !this.isFavorite;
							this.favoriteCount--;
						}
					}).catch(err => {
						console.log(err);
						this.$tip.error("收藏失败！");
						this.isFavorite = !this.isFavorite;
						this.favoriteCount--;
					});
				} else{	//取消收藏
					this.favoriteCount--;
					this.$http.post('/edu/favorite/unfavoriteContent',
					{
						contentId: this.articleId,
						userId: this.user.id,
						columnType: TypeArticle
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						} else {
							this.$tip.error("取消收藏失败！");
							this.isFavorite = !this.isFavorite;
							this.favoriteCount++;
						}
					}).catch(err => {
						console.log(err);
						this.$tip.error("取消收藏失败！");
						this.isFavorite = !this.isFavorite;
						this.favoriteCount++;
					});
				}
			},
			like(){
				this.isLike = !this.isLike
				if(this.isLike){	//点赞
					this.likeCount++;
					this.$http.post('/edu/like/likeContent', 
					{
						contentId: this.articleId,
						userId: this.user.id,
						authorId:this.article.userId,
						columnType: TypeArticle
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						} else {
							this.$tip.error("点赞失败！");
							this.isLike = !this.isLike
							this.likeCount--;
						}
					}).catch(err => {
						console.log(err);
						this.$tip.error("点赞失败！");
						this.isLike = !this.isLike
						this.likeCount--;
					});
				} else{	//取消点赞
					this.likeCount--;
					this.$http.post('/edu/like/dislikeContent',
					{
						contentId: this.articleId,
						userId: this.user.id,
						columnType: TypeArticle
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						} else {
							this.$tip.error("取消点赞失败！");
							this.isLike = !this.isLike
							this.likeCount++;
						}
					}).catch(err => {
						console.log(err);
						this.$tip.error("取消点赞失败！");
						this.isLike = !this.isLike
						this.likeCount++;
					});
				}
			},
			close(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>

</style>

